<template>
<div class="password">
	<div class="topTit">
		<h1>忘记{{ txt }}密码？</h1>
		<div v-if="editTransaction" class="posTxt" @click='statusEdit'>修改{{ anti }}密码</div>
	</div>
	<div class="con">
		<p v-if="!editTransaction">用户名</p>
		<label v-if="!editTransaction">
			<input type="text" placeholder="请您输入用户名" v-model="username">
		</label>
		<p>手机号</p>
		<label>
			<input type="number" placeholder="请您输入手机号" v-model="phone" oninput="if(value.length>11)value=value.slice(0,11)" >
		</label>
		<p>验证码</p>
		<div class="label">
			<input type="text" placeholder="请您输入验证码" v-model="code">
			<input type="button" :disabled='phone.length < 11 || codeIsSend' @click='sendCodeEv()' :value="codeTxt" class="code">
		</div>
		<p>新{{ txt }}密码</p>
		<label>
			<input type="password" :placeholder="'请输入新'+ txt +'密码'" v-model="newPass">
		</label>
		<p>确认新{{ txt }}密码</p>
		<label>
			<input type="password" :placeholder="'再次输入新'+ txt +'密码'" v-model="confirmPass">
		</label>

		<input type="button" value="确定修改" :disabled=' !isSubmit ' :class="{active: isSubmit }" class="submit" @click='next'>
	</div>

</div>
</template>

<script>
import { passEdie, sendCode } from '../../config/getData'

export default {
	data(){
		return {
			phone:'',
			code:'',
			codeTxt:'获取验证码',
			num:60,
			username:'',
			codeIsSend: false,
			newPass:'',
			confirmPass:'',
			txt:'登录',
			anti:'',
			status: -1
		}
	},
	computed: {
		editTransaction(){
			return !(this.$route.path.indexOf('login') !== -1)
		},
		isSubmit(){
			return this.phone.length >= 11 && this.code.length >= 4
		}
	},
	created(){
		this.status = this.$route.params.status == undefined ? 1 : 2;
		//页面显示的文字
		this.txt = this.status == 1 ? '登录' : '资金';
		//反转 - 切换按钮
		this.anti = this.status !== 1 ? '登录' : '资金';
	},
	watch:{
		status(){
			this.txt = this.status == 1 ? '登录' : '资金';
			this.anti = this.status !== 1 ? '登录' : '资金';
		}
	},
	methods: {
		statusEdit(){
			this.status = this.status == 1 ? 2 : 1
		},
		sendCodeEv(){
			var that = this;
			this.codeIsSend = true

			sendCode(this.phone).then( res => {
				alert(res.msg)
				if(res.data.str == 'nosend'){
					that.codeIsSend = false
					return
				}
				that.codeTxt = that.num + 's 重发';
				var codeInter = setInterval(function(){
					that.num--;
					that.codeTxt = that.num + 's 重发'
					if(that.num <= 0) {
						clearInterval(codeInter);
						that.codeTxt = '再次获取';
						that.num = 60
						that.codeIsSend = false
					}
				},1000)
			})
		},
		next(){
			passEdie(this.phone, this.newPass, this.confirmPass, this.code, this.status, this.username).then( res=> {
				alert(res.msg)
				window.location.reload()
			})
		}
	}
}
</script>


<style lang="scss" scoped>
@import '../../assets/css/all';
@import '../../assets/css/login.scss';

.password{@include screen;box-sizing: border-box;
background-color: white;

	 .con{padding-bottom: 20px;
		p {margin-top:20px;}
		.label .code{padding:0 15px;float:right;height: 35px;font-size:12px;background-color: white;border:1px solid #ddd;}
	}
}
</style>

